<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="上传视频">
        <el-upload class="upload-demo" ref="upload" action="http://127.0.0.1:8000/videos/upload_video"
          :on-preview="handlePreview" :on-success="handleSuccess" :on-remove="handleRemove" :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过30MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="描述信息">
        <el-input v-model="form.description" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      form: {
        title: '',
        description: '',
        url: ''
      },
      fileList: []
    }
  },
  methods: {
    onSubmit() {
      // this.$message('submit!')
      let payload = {
        title: this.form.title,
        description: this.form.description,
        url: this.form.url,
        created_time: dayjs().format('YYYY-MM-DD HH:mm:ss')
      }
      axios.post('http://127.0.0.1:8000/videos/add_one', payload).then(res => {
        let response = res.data
        if (response.code === 200) {
          this.$message({
            message: 'success!',
            type: 'success'
          })
        }
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(response, file, fileList) {
      console.log(response)
      this.form.url = response.data
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

